<template>
    <div class="moviesDetail" v-if="moviesDetail.movies">
        <div class="head">
            <van-image :src="moviesDetail.movies.image" height="200"></van-image>
            <div class="btn">
                <van-button type="danger" round 
                @click="$router.push('/moviesPlay')">
                    开始播放
                </van-button>
            </div>
        </div>
        <div class="body">
            <div class="jies" @click="showDescription = true">
                简介<van-icon name="arrow" />
            </div>
            <div class="name">{{ moviesDetail.movies.moviesName }}</div>
            <div class="type">{{ moviesDetail.movies.type }}</div>
            <div class="sub">{{ moviesDetail.movies.sub }}</div>
            <div class="moviesEpisodes" v-if="moviesDetail.moviesEpisodes.length">
                <div class="onEp">全{{ moviesDetail.moviesEpisodes.length }}集</div>
                <div class="list">
                    <div 
                    class="van-ellipsis"
                    :class="{av : index == moviesDetail.moviesLink.numEpisodes}"
                    v-for="(item, index) in moviesDetail.moviesEpisodes" :key="index"
                    @click="onItem(item, index)"
                    >
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>


        <van-popup v-model="showDescription" style="max-height: 70%;" position="bottom">
            <div class="description">
                <span class="title">简介：</span>
                {{ moviesDetail.movies.description }}
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { getMoviesDetail } from '@/api/movies'
    import { emitMobiesLink } from '@/api/moviesLink'
    import { mapMutations, mapState } from 'vuex'
    export default {
        data() {
            return {
                showDescription : false
            }
        },
        //计算属性
        computed:{
            ...mapState(['moviesDetail'])
        },
        created() {
            this.getData()
        },
        beforeDestroy(){
        },
        methods: {
            ...mapMutations(['setMoviesDetail']),
            getData(){
                getMoviesDetail(this.$route.query.id).then(res => {
                    if(res.code == 200){
                        console.log(res);
                        this.setMoviesDetail(res.data)
                    }
                })
            },
            onItem(item, index){
                this.moviesDetail.moviesLink.numEpisodes = index
                emitMobiesLink(this.moviesDetail.moviesLink).then(res => {
                    if(res.code == 200){
                        this.$router.push('/moviesPlay')
                    }
                })
            },
        },
    }
</script>

<style lang="less" scoped>
.moviesDetail{
    background-color: #eee;
    height: calc(~'100% - 46px');
    width: 100%;
    .head{
        display: flex;
        height: 260px;
        justify-content: center;
        align-items: center;
        .btn{
            height: 200px;
            position: relative;
            margin: 10px;
            width: 120px;
            /deep/ .van-button{
                position: absolute;
                bottom: 0;
                width: 120px;
            }
        }
    }
    .body{
        padding: 15px 10px;
        width: calc(~'100% - 20px');
        min-height: calc(~'100% - 290px');
        background-color: #fff;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        font-size: 14px;
        line-height: 30px;
        position: relative;
        .name{
            font-size: 17px;
            font-weight: 600;
        }
        .jies{
            position: absolute;
            right: 10px;
            top: 14px;
            font-size: 13px;
        }
        .moviesEpisodes{
            .onEp{
                text-align: right;
            }
            .list{
                display: flex;
                flex-wrap: wrap;
                &>div{
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    margin: 5px;
                    background-color: #f6f6f6;
                    border-radius: 5px;
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                }
                .av{
                    border: 1px solid #ff7800;
                }
            }
        }
    }
    .description{
        padding: 20px 10px;
        line-height: 40px;
        font-size: 14px;
        .title{
            font-weight: 900;
        }
    }
}
</style>